import { VAR } from "../introduce.js";

window.onload = function () {
  // 先渲染

  // 提取数据
  const taskInfo = JSON.parse(localStorage.getItem("deliveryInfo"));
  const index = new URLSearchParams(location.search).get("id") || 0;

  // 任务编号
  const accounts = document.querySelector(".essential span");
  // 起始地点
  const go = document.querySelector(".essential .hideEssential .go p");
  // 重终点
  const to = document.querySelector(".essential .hideEssential .to p");
  // 司机电话发货期等
  const drivephone = document.querySelector(
    ".essential .hideEssential .text .phone"
  );
  const drivetimego = document.querySelector(
    ".essential .hideEssential .text .timego"
  );
  const drivetimeto = document.querySelector(
    ".essential .hideEssential .text .timeto"
  );
  const drivename = document.querySelector(
    ".essential .hideEssential .text .name"
  );
  // 车辆司机信息
  const driverName = document.querySelector(".driver .uname");
  const drivernumber = document.querySelector(".driver .num");
  // 车辆信息
  // 货物信息
  // 渲染运输路线
  const roteGo = document.querySelector(".transRoutes .find .go div");
  const rotego = document.querySelector(".transRoutes .find .go p");
  const roteTo = document.querySelector(".transRoutes .find .destination div");
  const roteto = document.querySelector(".transRoutes .find .destination p");
  // 渲染数据
  // 提取数据

  function render() {
    // 封装渲染函数
    // 任务编号;
    accounts.innerHTML = `(任务编号:${taskInfo[index].taskNumber})`;
    // 地点
    go.innerHTML = taskInfo[index].actualAddress;
    to.innerHTML = taskInfo[index].deliveryAddress;
    // 司机电话发货期等
    drivephone.innerHTML = taskInfo[index].phone;
    drivetimego.innerHTML = taskInfo[index].pickupTime;
    drivetimeto.innerHTML = taskInfo[index].estimatedDeliveryTime;
    drivename.innerHTML = taskInfo[index].contactPerson;
    // 车辆司机信息;
    driverName.innerHTML = taskInfo[index].contactPerson;
    // 车牌号
    drivernumber.innerHTML = taskInfo[index].carNumber;
    //运输路线
    // 货物信息
    // 提货信息
  }
  render();
  // 页面后退一步实现
  const back = document.querySelector(".topPreset a");
  back.addEventListener("click", function () {
    history.back();
  });
  // 获取元素
  // 任务编号
  const taskNum = document.querySelector(".essential .wrapper .info span");
  // 基本信息展开按钮
  const taskNumUnfold = taskNum.nextElementSibling;
  // 折叠层
  const hideEssential = document.querySelector(".hideEssential");
  let flag1 = false;
  taskNumUnfold.addEventListener("click", function () {
    flag1 = !flag1;
    if (flag1) {
      hideEssential.style.display = "block";
      taskNumUnfold.innerHTML = "-";
    } else {
      hideEssential.style.display = "none";
      taskNumUnfold.innerHTML = "+";
    }
  });
  // 车辆司机信息
  const driverNumUnfold = document.querySelector(".driver .wrapper #fold");
  const hideDrive = document.querySelector(".hideDrive");
  let flag2 = false;
  driverNumUnfold.addEventListener("click", function () {
    flag2 = !flag2;
    if (flag2) {
      hideDrive.style.display = "block";
      driverNumUnfold.innerHTML = "-";
    } else {
      hideDrive.style.display = "none";
      driverNumUnfold.innerHTML = "+";
    }
  });
  // 运输路线
  const transRoutes = document.querySelector(".transRoutes .wrapper #fold");
  const findtransRoutes = document.querySelector(".transRoutes .find");
  let flag3 = false;
  transRoutes.addEventListener("click", function () {
    flag3 = !flag3;
    if (flag3) {
      findtransRoutes.style.display = "block";
      transRoutes.innerHTML = "-";
    } else {
      findtransRoutes.style.display = "none";
      transRoutes.innerHTML = "+";
    }
  });
  // 提货信息
  const Delivery = document.querySelector(".Delivery .wrapper #fold");
  const hidedeli = document.querySelector(".hidedeli");
  let flag5 = false;
  Delivery.addEventListener("click", function () {
    flag5 = !flag5;
    if (flag5) {
      hidedeli.style.display = "block";
      Delivery.innerHTML = "-";
      console.log(Delivery);
    } else {
      hidedeli.style.display = "none";
      Delivery.innerHTML = "+";
      console.log(Delivery.style.backgroundImage);
    }
  });
  // 交货信息
  const deliveryInfo = document.querySelector(".deliveryInfo .wrapper #fold");
  const hideInfo = document.querySelector(".hideInfo");
  let flag6 = false;
  deliveryInfo.addEventListener("click", function () {
    flag6 = !flag6;
    if (flag6) {
      hideInfo.style.display = "block";
      deliveryInfo.innerHTML = "-";
    } else {
      hideInfo.style.display = "none";
      deliveryInfo.innerHTML = "+";
    }
  });
  // 货物信息
  const goodsInfo = document.querySelector(".goodsInfo .wrapper #unfold");
  const hidegoods = document.querySelector(".hidegoods");
  let flag4 = false;
  goodsInfo.addEventListener("click", function () {
    flag4 = !flag4;
    if (flag4) {
      hidegoods.style.display = "block";
      goodsInfo.innerHTML = "-";
    } else {
      hidegoods.style.display = "none";
      goodsInfo.innerHTML = "+";
    }
  });
  // 异常信息
  const abnormal = document.querySelector(".abnormal .wrapper #fold");
  const hidecontent = document.querySelector(".abnormal .content");
  let flag7 = false;
  abnormal.addEventListener("click", function () {
    flag7 = !flag7;
    if (flag7) {
      console.log(111);
      hidecontent.style.display = "block";
      abnormal.innerHTML = "-";
    } else {
      hidecontent.style.display = "none";
      abnormal.innerHTML = "+";
    }
  });
  // 异常上报
  // 获取数据
  let arr = [];
  arr = JSON.parse(localStorage.getItem("dataAbnormal"));

  const ul = document.createElement("ul");
  ul.innerHTML = `
  <li class="report">
              <p>上报时间</p>
              <span>${arr[0].times}</span>
            </li>
            <li class="typeS">
              <p>异常类型</p>
              <span>${arr[0].type}</span>
              <a href="javascript:;"><img src="./image/右向箭头.png" alt></a>
            </li>
            <li class="outcome">
              <p>
                处理结果
              </p>
              <span>继续运输</span>
            </li>`;
  hidecontent.append(ul);
};
